<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="../easyui/1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
        <ul id="tt"></ul>
        <a href="javascript:;" onclick="addRootNode()">添加根节点</a>
        <a href="javascript:;" onclick="editNode()">修改</a>
        <a href="javascript:;" onclick="remove()">删除</a>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
		<form id="ff" class="easyui-form"   method="post" data-options="novalidate:true">
			<input type="hidden" name="id" id="id">
			<input type="hidden" name="parentId" id="parentId">
		    <div style="margin:20px 0">
		       
		        <input class="easyui-textbox"  name="text" style="width:90%" data-options="label:'Text:',required:true" />
		    </div>
		</form>
		
		<div style="text-align:center;padding:5px 0;">
			<a href="javascript:;" class="easyui-linkbutton" onclick="submitForm()" style="width:58px">Submit</a>
			<a href="javascript:;" class="easyui-linkbutton" onclick="clearForm()" style="width:46px">Clear</a>
		</div>
	</div>

</div>
<script type="text/javascript">

	var nodeId=null;
	$('#tt').tree({
		animate:true,
		url:'http://localhost:3000/cate/list',
		method:'get',
		onClick:function(node){
			$('#parentId').val(node._id);
		}
	})


	 function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                	var postUrl;
                	if(nodeId!==null){
                		postUrl='http://localhost:3000/cate/data/'+nodeId;
                	}else{
                		postUrl='http://localhost:3000/cate/data';
                	}

                	var formData=$('#ff').serializeJSON();
                	if(formData.parentId.length===0){
                		delete formData.parentId;
                	}
                	$.ajax({
                		type:'post',
                		url:postUrl,
                		data:formData
                	}).then(function(res){
                		$('#tt').tree('reload');
                	})
                }else{
                	alert('表单验证失败')
                }
            }
        });
    }
    function clearForm(){
        $('#ff').form('clear');
    }


    function remove(){
    	var node =$('#tt').tree('getSelected');
    	var id=node._id;

    	$.ajax({
    		type:'delete',
    		url:"http://localhost:3000/cate/data/"+id
    	}).then(res=>{
    		console.log(res)
    		$('#tt').tree('reload')
    	})
    }

    function addRootNode(){
    	$('#parentId').val(null);
        nodeId=null;//记得清空此id，否则下次还是修改，而不是新增
    }

    function editNode(){
    	var node=$('#tt').tree('getSelected');
    	nodeId=node._id;

    	$('#ff').form('load',node);
    }

</script>
</body>
</html>